<template>
  <div class="paymentd">
    <vheader pageTitle="回款明细"></vheader>
    <div class="paymentd-header"  v-show="isHavaData">
      <p>{{ $route.params.name }}</p>
    </div>
    <spliter  v-show="isHavaData"></spliter>
    <ul class="paymentd-content"  v-show="isHavaData">
      <li class="border-1px">
        <span>期数</span>
        <span>回款时间</span>
        <span>回款本息</span>
        <span>状态</span>
      </li>
      <li v-for="item in dataList"
        class="border-1px"
        :style="{color: item.status === '2' ? '#666' : '#999'}">
        <span>{{ item.sortOrder }}</span>
        <span>{{ item.deadLine }}</span>
        <span :style="{color: item.status === '2' ? '#ff4133' : '#999'}">{{ item.interest + item.capital }}</span>
        <span>{{ item.status | formatStatus }}</span>
      </li>
    </ul>
    <no-data v-show="!isHavaData">暂无数据哦~</no-data>
  </div>
</template>

<script>
  import vheader from 'components/common/comHead'
  import spliter from 'components/common/spliter'
  import noData from 'components/common/noData'

  export default {
    data () {
      return {
        isHavaData: false,
        dataList: [],
        subjectName: ''
      }
    },
    filters: {
      formatStatus (value) {
        if (value === '0') {
          return '等待支付'
        }
        if (value === '1') {
          return '收益中'
        }
        if (value === '2') {
          return '已还清'
        }
        if (value === '3') {
          return '持有中'
        }
        if (value === '4') {
          return '未满标'
        }
        if (value === '5') {
          return '流标'
        }
        if (value === '6') {
          return '退款'
        }
      }
    },
    created () {
      const userAcctKey = this.getUserCookie('acctKey')
      this.$http.get(`/api/member/borrowInvestorDetailList?acctKey=${userAcctKey}&investorRecordId=${this.$route.params.id}&currentPage=1&numPerPage=999`)
        .then((res) => {
          if (res.data.success) {
            this.isHavaData = true
            this.dataList = res.data.data.list
            this.subjectName = res.data.data.subjectName
          }
        })
        .catch((err) => {
          alert(err)
        })
    },
    components: {
      vheader,
      spliter,
      noData
    }
  }
</script>

<style lang='scss'>
  @import '../../common/scss/tool.scss';
  @import '../../common/scss/_variable.scss';

  .paymentd {
    font-size: 30px;
    &-header {
      height: 108px;
      p {
        color: $base-666;
        line-height: 108px;
        text-indent: 30px;
      }
    }
    &-content {
      li {
        display: flex;
        align-items: center;
        height: 90px;
        margin: 0 20px;
        font-size: 26px;
        color: $base-999;
        text-align: center;
        @include border-1px(#{$base-e5e5e5});
        span {
          width: 25%;
        }
      }
      &>li:nth-child(1) {
        margin: 0;
        padding: 0 20px;
        font-size: 30px;
        color: $base-666;
      }
    }
  }
</style>
